<template>
    <!-- 寄快递 -->
	<view>
		<view class="expressBox">
			<!-- 联系人 -->
			<view>
				<!-- 寄 -->
				<view class="expressSend">
					<!-- 左边图标 -->
					<view class="expressSendLeft" style="border-bottom: 1px solid #ddd;">
						<image src="@/static/images/home_icon_ji_nor.png" mode=""></image>
					</view>
					<!-- 中间 -->
					<view class="expressSendCen" style="border-bottom: 1px solid #ddd;">
						<view class="expressSendCenName">
							<text style="margin-right: 6px;">徐某某</text>
							<text>19912345678</text>
						</view>
						<view class="expressSendCenAddress">
							<text>江西省赣州市经开区国际企业中心11栋三单元808室</text>
						</view>
					</view>
					<!-- 右边图标 -->
					<view class="expressSendRight" style="border-bottom: 1px solid #ddd;">
						<view class="expressSendRightView">
							<image src="@/static/images/home_icon_dzb_nor.png" mode=""></image>
						</view>
						<view>
							<text>地址簿</text>
						</view>
					</view>
				</view>
				<!-- 收 -->
				<view class="expressSend">
					<!-- 左边图标 -->
					<view class="expressSendLeft">
						<image src="@/static/images/home_icon_shou_nor.png" mode=""></image>
					</view>
					<!-- 中间 -->
					<view class="expressSendCen">
						<view class="expressSendCenName">
							<text style="margin-right: 6px;">徐某某</text>
							<text>19912345678</text>
						</view>
						<view class="expressSendCenAddress">
							<text>江西省赣州市经开区国际企业中心11栋三单元808室</text>
						</view>
					</view>
					<!-- 右边图标 -->
					<view class="expressSendRight">
						<view class="expressSendRightView">
							<image src="@/static/images/home_icon_dzb_nor.png" mode=""></image>
						</view>
						<view>
							<text>地址簿</text>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 内容 -->
			<view class="expressCon">
				<ul>
					<li class="expressConTit">
						<view class="expressTitle">
							<text>寄件方式</text>
						</view>
						<view style="color: #f04545;">
							<text>上门取件</text>
						</view>
					</li>
					<li>
						<view>
							<text>期待上门时间</text>
						</view>
						<view>
							<text>一小时内</text>
							<image src="@/static/images/home_icon_grgd_nor.png" mode=""></image>
						</view>
					</li>
					<li>
						<view class="expressConMust">
							<text>物品信息</text>
							<image src="@/static/images/home_icon_bt_nor.png" mode=""></image>
						</view>
						<view>
							<text>请填写</text>
							<image src="@/static/images/home_icon_grgd_nor.png" mode=""></image>
						</view>
					</li>
					<li>
						<view>
							<text>承运商</text>
						</view>
						<view>
							<text>45645644213</text>
							<image src="@/static/images/home_icon_grgd_nor.png" mode=""></image>
						</view>
					</li>
				</ul>
			</view>
			
			<!-- 备注 -->
			<view class="expressNote">
				<view class="expressTitle">
					<text>快递备注</text>
				</view>
				<view class="expressNoteCon">
					<textarea v-model="textareaVal" placeholder-style="color:#ccc" placeholder="其他需求请告诉我们"/>
				</view>
				<view class="expressNoteUl">
					<text
						v-for="(item, index) in note"
						:key="index" :class="item.is ? 'expressNoteActive' : ''"
						@click="noteFun(index)"
					>
						{{ item.text }}
					</text>
				</view>
			</view>
			
			<!-- 服务 -->
			<view class="expressServe">
				<checkbox-group>
					<label style="color: #999;" @click="serveFun">
						<checkbox :value="isServe" style="transform:scale(0.7)" />我已阅读
					</label>
				</checkbox-group>
				<text style="color: #f04545;">《寄件服务》</text>
			</view>
		</view>
			
		<!-- 下单 -->
		<view class="expressOrder">
			<view>
				<view style="font-size: 30rpx;color: #333;font-weight: 600;">
					<text>预计费用：</text>
					<text style="color: #f04545;">￥28.00</text>
				</view>
				<view style="font-size: 24rpx;color: #999;">
					<text>费用以小哥核算为准</text>
				</view>
			</view>
			<view class="expressOrderButton" @click="submitCourier">
				<text>下单</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 备注文本框的值
				textareaVal: '',
				// 是否勾选‘寄件服务’
				isServe: 'false',
				// 备注按钮
				note: [
					{
						text: '带纸箱',
						is: true
					},
					{
						text: '重',
						is: false
					},
					{
						text: '需要楼梯',
						is: false
					},
					{
						text: '带泡沫',
						is: false
					},
					{
						text: '易碎',
						is: false
					},
				]
			}
		},
		methods: {
			// 备注按钮
			noteFun(e) {
				this.note[e].is = !this.note[e].is
			},
			// 寄件服务
			serveFun() {
				if (this.isServe === 'false') {
					this.isServe = 'true'
				} else {
					this.isServe = 'false'
				}
			},
			
			// 
			// 快递提交
			submitCourier() {
				if (this.isServe === 'false') {
					console.log('提示勾选寄件服务')
				} else {
					console.log('提交表单')
				}
			}
		}
	}
</script>

<style lang="scss">
	.expressBox {
		width: 100%;
		min-height: 100%;
		padding: 20rpx 26rpx 0;
		box-sizing: border-box;
		background: f6f6f6;
			
		ul, li {
			padding: 0;
			margin: 0;
			list-style: none;
			box-sizing: border-box;
		}
		
		.expressSend {
			display: flex;
			align-items: center;
			width: 100%;
			height: 168rpx;
			background: #fff;
			padding: 0 21rpx;
			
			&:first-child {
			border-radius: 10rpx 10rpx 0 0;
			}
			
			&:last-child {
			border-radius: 0 0 10rpx 10rpx;
			}
			
			.expressSendLeft {
				width: 58rpx;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				
				image {
					width: 100%;
					height: 60rpx;
				}
			}
			
			.expressSendCen {
				width: 524rpx;
				height: 100%;
				padding: 26rpx 21rpx 0;
				box-sizing: border-box;
				
				
				.expressSendCenName {
					font-size: 30rpx;
					padding-right: 26rpx;
					color: #333;
					border-right: 1px solid #ddd;
				}
				
				.expressSendCenAddress {
					font-size: 26rpx;
					padding-right: 26rpx;
					color: #999;
					border-right: 1px solid #ddd;
					text-overflow: -o-ellipsis-lastline;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}
			}
			
			.expressSendRight {
				width: 109rpx;
				height: 100%;
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				
				view {
					width: 100%;
					height: 50%;
					display: flex;
					justify-content: center;
				}
				
				.expressSendRightView {
					align-items: flex-end;
				}
				
				image {
					width: 37rpx;
					height: 40rpx;
				}
				
				text {
					width: 100%;
					text-align: center;
					font-size: 24rpx;
					color: #333;
				}
			}
		}
		
		.expressCon {
			margin: 20rpx 0;
			background: #fff;
			
			ul {
				padding: 0 20rpx;
				
				li {
					display: flex;
					justify-content: space-between;
					border-bottom: 1px solid #ddd;
					height: 100rpx;
					line-height: 100rpx;
					
					view {
						display: flex;
						align-items: center;
						color: #333;
						
						&:first-child {
							font-size: 30rpx;
						}
						
						&:last-child {
							color: #999;
							font-size: 28rpx;
						}
					}
					
					&:last-child {
						border-bottom: 0;
					}
					
					.expressConMust {
						image {
							width: 70rpx;
							height: 30rpx;
						}
					}
					
					image {
						width: 14rpx;
						height: 25rpx;
						margin-left: 10rpx;
					}
				}
			}
		}
		
		.expressTitle {
			font-size: 32rpx;
			font-weight: 600;
		}
		
		.expressNote {
			margin: 20rpx 0;
			padding: 20rpx;
			background: #fff;
			
			.expressNoteCon {
				width: 100%;
				color: #999;
				background: #f6f6f6;
				padding: 18rpx;
				margin-top: 28rpx;
				
				textarea {
					width: 100%;
					min-height: 180rpx;
					font-size: 30rpx;
				}
			}
			
			.expressNoteUl {
				display: flex;
				flex-wrap: wrap;
				
				.expressNoteActive {
					border: 0;
					background: #f04545;
					color: #fff;
				}
				
				text {
					width: calc((100% - 90rpx) / 4);
					border: 1px solid #ddd;
					margin: 20rpx 30rpx 0 0;
					height: 60rpx;
					line-height: 60rpx;
					text-align: center;
					box-sizing: border-box;
					font-size: 26rpx;
					color: #999;
					border-radius: 30rpx;
					
					&:nth-child(4n) {
						margin-right: 0;
					}
				}
			}
		}
		
		.expressServe {
			display: flex;
			align-items: center;
			height: 48rpx;
			line-height: 48rpx;
			font-size: 28rpx;
			margin-bottom: 60rpx;
		}
	}
	
	.expressOrder {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		padding: 16rpx 26rpx;
		box-sizing: border-box;
		background: #fff;
		
		.expressOrderButton {
			width: 200rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			background: #ef3838;
			color: #fff;
			border-radius: 40rpx;
			font-size: 32rpx;
		}
	}
</style>
